import React, { useState, useEffect } from 'react';
import { Table, Button, Space, message, Card, Tag, Image, Popover, Checkbox } from 'antd';
import { PlusOutlined, EyeOutlined, EditOutlined, DeleteOutlined, FilterOutlined, ReloadOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import api from '@/api';
import CreateCardHolder from './holder/components/CreateCardHolder';
import ViewCardHolder from './holder/components/ViewCardHolder';
import type { CardHolder } from '@/types/holder';
import { mockHolders } from '@/mock/holderData';

/**
 * API响应接口
 * 定义API返回数据的通用结构
 */
interface ApiResponse<T = unknown> {
  code: number;      // 状态码
  message: string;   // 消息
  data?: T;          // 数据
}

/**
 * 筛选列配置接口
 * 定义表格列筛选功能的配置
 */
interface ScreenColumn {
  label: string;                     // 列标签
  prop: string;                      // 数据属性名
  align: 'center' | 'left' | 'right'; // 对齐方式
  disabled: boolean;                 // 是否禁用
  show: boolean;                     // 是否显示
  minWidth: string;                  // 最小宽度
}

/**
 * 持卡人管理组件
 * 用于展示和管理持卡人列表，包括查询、添加、查看、编辑、删除等功能
 */
const Holder: React.FC = () => {
  // 状态管理
  const [holders, setHolders] = useState<CardHolder[]>([]); // 持卡人列表数据
  const [loading, setLoading] = useState(false); // 加载状态
  const [createVisible, setCreateVisible] = useState(false); // 创建模态框显示状态
  const [viewVisible, setViewVisible] = useState(false); // 查看模态框显示状态
  const [selectedHolder, setSelectedHolder] = useState<CardHolder>(); // 选中的持卡人
  const [screenList, setScreenList] = useState<ScreenColumn[]>([]); // 表格列筛选配置
  const { t } = useTranslation(); // 国际化翻译

  /**
   * 初始化表格列配置
   * 设置表格列的显示、对齐、宽度等属性
   */
  const initScreenList = () => {
    const columns: ScreenColumn[] = [
      {
        label: t('holder_list.table.user_id'),
        prop: 'cardholder_json.cardholderId',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '210',
      },
      {
        label: t('holder_list.table.name'),
        prop: 'name',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '120',
      },
      {
        label: t('holder_list.table.initials'),
        prop: 'cardholder_json.cardholderNameAbbreviation',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '120',
      },
      {
        label: t('holder_list.table.date_of_birth'),
        prop: 'cardholder_json.dateOfBirth',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '120',
      },
      {
        label: t('holder_list.table.email'),
        prop: 'cardholder_json.email',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '180',
      },
      {
        label: t('holder_list.table.nationality'),
        prop: 'cardholder_json.nationalityCountryCode',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '160',
      },
      {
        label: t('holder_list.table.country_code'),
        prop: 'cardholder_json.mobilePrefix',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '80',
      },
      {
        label: t('holder_list.table.mobile_number'),
        prop: 'cardholder_json.mobile',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '160',
      },
      {
        label: t('holder_list.table.billing_state'),
        prop: 'cardholder_json.residentialState',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '120',
      },
      {
        label: t('holder_list.table.status'),
        prop: 'cardholder_json.status',
        align: 'center',
        disabled: false,
        show: true,
        minWidth: '100',
      }
    ];
    setScreenList(columns);
  };

  // useEffect钩子：组件挂载时初始化列配置和获取持卡人数据
  useEffect(() => {
    initScreenList();
    fetchHolders();
  }, []);

  /**
   * 获取持卡人列表
   * 从API获取持卡人数据，开发环境下使用模拟数据
   */
  const fetchHolders = async () => {
    setLoading(true); // 开始加载
    try {
      const response = await api.get('api/cards', {
        params: {
          _action: 'getData',
          _subAction: 'getCardHolders'
        }
      }) as ApiResponse<CardHolder[]>;
      if (response.code === 200) {
        setHolders(response.data || []); // 设置持卡人数据
      } else {
        message.error(response.message || t('common.loadFailed'));
        // 开发环境下使用模拟数据
        if (process.env.NODE_ENV === 'development') {
          setHolders(mockHolders);
        }
      }
    } catch (error: unknown) {
      console.error('Fetch holders error:', error);
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      message.error(errorMessage || t('common.loadFailed'));
      // 开发环境下使用模拟数据
      if (process.env.NODE_ENV === 'development') {
        setHolders(mockHolders);
      }
    } finally {
      setLoading(false); // 结束加载
    }
  };

  /**
   * 处理查看操作
   * @param holder 要查看的持卡人
   */
  const handleView = (holder: CardHolder) => {
    setSelectedHolder(holder); // 设置选中的持卡人
    setViewVisible(true); // 显示查看模态框
  };

  /**
   * 处理删除操作
   * @param id 要删除的持卡人ID
   */
  const handleDelete = async (id: number) => {
    try {
      const response = await api.post('api/cards', { id }, {
        params: {
          _action: 'deleteCardHolder'
        }
      }) as ApiResponse;
      if (response.code === 200) {
        message.success(t('cardHolder.deleteSuccess'));
        fetchHolders(); // 重新获取数据刷新列表
      } else {
        message.error(response.message || t('cardHolder.deleteFailed'));
      }
    } catch (error: unknown) {
      console.error('Delete holder error:', error);
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      message.error(errorMessage || t('cardHolder.deleteFailed'));
    }
  };

  /**
   * 表格列配置
   * 根据筛选配置生成表格列
   */
  const columns = screenList
    .filter(item => item.show) // 只显示启用的列
    .map(item => {
      const column = {
        title: item.label, // 列标题
        dataIndex: item.prop, // 数据属性
        key: item.prop, // 唯一键
        align: item.align, // 对齐方式
        width: item.minWidth, // 宽度
        render: (value: unknown) => {
          switch (item.prop) {
            case 'cardholder_json.nationalityCountryCode':
              // 国籍列：显示国旗图标和国家代码
              return (
                <Space>
                  <Image
                    width={20}
                    src={`https://wallex2.oss-cn-hangzhou.aliyuncs.com/asset/images/flags/${String(value).toLowerCase()}.png`}
                    alt={String(value)}
                    preview={false}
                  />
                  <span>{String(value)}</span>
                </Space>
              );
            case 'cardholder_json.status':
              // 状态列：根据状态显示不同颜色的标签
              return (
                <Tag color={value === 'active' ? 'green' : 'red'}>
                  {t(`cardHolder.status.${String(value)}`)}
                </Tag>
              );
            default:
              // 默认列：显示值或"未设置"
              return value ? String(value) : t('common.notSet');
          }
        }
      };

      return column;
    });

  // 操作列配置
  const operationColumn = [
    {
      title: t('common.actions'), // 操作列标题
      key: 'actions', // 唯一键
      align: 'center' as const, // 居中对齐
      fixed: 'right' as const, // 固定在右侧
      width: 120, // 宽度
      render: (_: unknown, record: CardHolder) => (
        <Space size="middle">
          {/* 查看按钮 */}
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
          >
            {t('common.view')}
          </Button>
          {/* 编辑按钮（功能待实现） */}
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => {/* 编辑功能待实现 */}}
          >
            {t('common.edit')}
          </Button>
          {/* 删除按钮 */}
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            {t('common.delete')}
          </Button>
        </Space>
      ),
    }
  ];

  // 合并所有列配置
  const finalColumns = [...columns, ...operationColumn];

  return (
    <div className="p-6">
      <Card className="m-0 px-6 shadow-[0px_0px_16px_0px_rgba(0,0,0,0.03)]">
        {/* 工具栏 */}
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold">{t('cardHolder.title')}</h2>
          <Space>
            {/* 筛选显示列 */}
            <Popover
              content={
                <div>
                  {screenList.map((item, index) => (
                    <div key={index}>
                      <Checkbox
                        checked={item.show} // 是否选中
                        disabled={item.disabled} // 是否禁用
                        onChange={(e) => {
                          const newList = [...screenList];
                          newList[index].show = e.target.checked; // 更新显示状态
                          setScreenList(newList); // 设置新的配置
                        }}
                      >
                        {item.label}
                      </Checkbox>
                    </div>
                  ))}
                </div>
              }
              trigger="click" // 点击触发
            >
              <Button icon={<FilterOutlined />} />
            </Popover>

            {/* 新增持卡人按钮 */}
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setCreateVisible(true)} // 显示创建模态框
            >
              {t('cardHolder.create')}
            </Button>

            {/* 刷新按钮 */}
            <Button
              icon={<ReloadOutlined />}
              onClick={fetchHolders} // 重新获取数据
            />
          </Space>
        </div>

        {/* 持卡人表格 */}
        <Table
          columns={finalColumns} // 列配置
          dataSource={holders} // 数据源
          loading={loading} // 加载状态
          rowKey="id" // 行键
          scroll={{ x: 1500 }} // 水平滚动
          pagination={{
            showSizeChanger: true, // 显示每页条数切换器
            showQuickJumper: true, // 显示快速跳转
            showTotal: (total, range) =>
              t('common.paginationTotal', { total, start: range[0], end: range[1] }), // 显示总数
          }}
        />
      </Card>

      {/* 创建持卡人模态框 */}
      <CreateCardHolder
        visible={createVisible} // 显示状态
        onCancel={() => setCreateVisible(false)} // 取消回调
        onSuccess={fetchHolders} // 成功回调（刷新数据）
      />

      {/* 查看持卡人模态框 */}
      <ViewCardHolder
        visible={viewVisible} // 显示状态
        onCancel={() => setViewVisible(false)} // 取消回调
        holder={selectedHolder} // 选中的持卡人
      />
    </div>
  );
};

export default Holder;